<template>
  <div class="see">
    <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    <el-col :span="4">
      <div class="block">
        <div class="radio" style="float: left"></div>

        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
    <el-col span="19">
      <el-form :model="form">
        <el-row>
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>

          <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            :size="size"
            border
          >
            <!-- <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template> -->
            <el-divider></el-divider>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                本人姓名
              </template>
              {{ uinfoIdLoan.userName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{ uinfoIdLoan.userPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                性别
              </template>
              {{ uinfoIdLoan.userSex }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                邮箱
              </template>
              {{ uinfoIdLoan.userAdd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                学历
              </template>
              {{ uinfoIdLoan.degree }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                年龄
              </template>
              {{ uinfoIdLoan.age }}
            </el-descriptions-item>
          </el-descriptions>

          <el-divider></el-divider>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="贷款性质" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.productTypeName"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="贷款产品" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.productName" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="还款方式" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.averageName" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="借款期限" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.diTimeLimit" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="申请额度" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.productAmount" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="信用分" :label-width="formLabelWidth">
                <el-input
                  v-model="addGredit.bonaGrade"
                  autocomplete="off"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="审批额度" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.aiMoney"
                  autocomplete="off"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="综合利率" :label-width="formLabelWidth">
                <el-input :disabled="true"> </el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="居住情况" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.residence" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="现居地址" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.currentPlaceOfResidence"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="详细地址" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.detailedAddress"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="居住时长" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.currentLengthOfResidence"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="住宅电话" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.workPhone" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="直系亲属姓名" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.nameOfImmediateRelative"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="关系" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.relationship" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-form-item label="移动电话" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.relationshipPhone"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="工作时间" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.workingHours" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="公司名称" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.companyName" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="公司地址" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.companyAddress" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="详细地址" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.detaileAddress" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="公司性质" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.natureOfTheCompany"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="所属行业" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.industry" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="每月收入" :label-width="formLabelWidth">
                <el-input v-model="uinfoIdLoan.monthlyIncome" :disabled="true">
                </el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证正面">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/upload"
                name="file"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证反面">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/upload"
                name="file"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="开户行" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.receivingAccountOpened"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="户名" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.receivingAccountName"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item
                label="收款账户开户地"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="uinfoIdLoan.receivingAccountAddress"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label=" 支行名称" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.receivingBankBranch"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>

          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label=" 银行帐号" :label-width="formLabelWidth">
                <el-input
                  v-model="uinfoIdLoan.receivingBankNumber"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="10"
            ><div class="grid-content bg-purple">
              <el-form-item label="材料一" :label-width="formLabelWidth">
                <template>
                  <el-button type="text" @click="open">{{
                    uinfoIdLoan.houseNumber
                  }}</el-button>
                </template>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="10"
            ><div class="grid-content bg-purple">
              <el-form-item label="材料二" :label-width="formLabelWidth">
                <template>
                  <el-button type="text" @click="opent">{{
                    uinfoIdLoan.licensePlateNumber
                  }}</el-button>
                </template>
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              <h4>客户材料审核---初审</h4>
            </div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="初审结果" :label-width="formLabelWidth">
                <el-select v-model="addAudit.aiResult" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="9"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="审核意见" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="addAudit.aiOpinion"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="8"
            ><div class="grid-content">
              <el-col :span="8">
                <template>
                  <el-popconfirm
                    title="您确定要提交吗？"
                    @confirm="toAddAudit()"
                  >
                    <el-button slot="reference" type="primary" 
                      >提交审核</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-col>
              <el-col :span="8"
                ><div class="grid-content">
                  <el-button type="danger" @click="bohui()">驳回审核</el-button>
                </div></el-col
              >
            </div></el-col
          >
        </el-row>
      </el-form>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "通过",
        },
        {
          value: "2",
          label: "驳回",
        },
        {
          value: "3",
          label: "拒绝",
        },
      ],
      value: "",
      reverse: true,
      activities: [
        {
          content: "个人信息",
          timestamp: "2022-12-17",
        },
        {
          content: "贷款信息",
          timestamp: "2022-12-17",
        },
        {
          content: "公司信息",
          timestamp: "2022-12-17",
        },
      ],
      size: "",
      uinfoIdLoan: {},
      addAudit: {},
      addGredit: {},
    };
  },
  methods: {
    open() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    opent() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    bohui(){
      this.addAudit.diNumber = this.uinfoIdLoan.diNumber;
      this.$axios.post("/auditInfoLi/auditchuWei", this.addAudit).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("已成功提交请开始下一个任务!");
        }
      });

    },
    toAddAudit() {
      this.addAudit.diNumber = this.uinfoIdLoan.diNumber;

      this.$axios.post("/auditInfoLi/auditchufu", this.addAudit).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("已成功提交请开始下一个任务!");
        }
      });
      this.addGredit.userId = this.uinfoIdLoan.userId;
      this.addGredit.userName = this.uinfoIdLoan.userName;
      this.addGredit.userIdentyid = this.uinfoIdLoan.userIdentyid;
      this.$axios.post("/Bona/bona", this.addGredit).then((res) => {
        if (res.data.code == 200) {
        }
      });

      this.$router.replace("/preliminary");
    },
    loadUinfoIdLoan() {
      // alert(this.$route.query.uinfoId);
      this.$axios
        .get("/debitinfos/" + this.$route.query.uinfoId)
        .then((res) => {
          this.uinfoIdLoan = res.data.data.uinfoIdLoanNumber;
          // JSON.stringify(sessionStorage.setItem("uinfoIdLoan",this.uinfoIdLoan));
        });
    },
    goBack() {
      console.log("go back");
      this.$router.push("/preliminary");
    },
  },
  mounted() {
    this.loadUinfoIdLoan();
  },
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>